<template>
	<view class="s-recommend">
		<view>
			<uni-swiper-dot class="uni-swiper-dot-box" @clickItem="clickItem" :info="info" :current="current" :dots-styles="dotsStyles" field="content">
				<swiper circular :autoplay="autoplay" :interval="interval" class="swiper-box" @change="change" :current="swiperDotIndex">
					<swiper-item v-for="(d, index) in info" :key="index" @click="clickBanner(d)">
						<view class="swiper-item"><image style="width: 100%;" :src="d.url" alt=""></image></view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>

		<view>
			<uni-swiper-dot :dots-styles="dotsStyles2" :info="group" :current="current2">
				<swiper class="menu-swiper" @change="change2">
					<swiper-item>
						<uni-grid :column="5" :show-border="false" :highlight="false" @change="onChange">
							<uni-grid-item v-for="(d, index) in groupList" :index="index" :key="d.id">
								<view class="grid-item-box" style="background-color: #fff;">
									<uni-icons custom-prefix="iconfont" color="#05C697" :type="d.icontype" :size="d.iconsize"></uni-icons>
									<text class="text">{{ d.name }}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</swiper-item>
					<swiper-item>
						<uni-grid :column="5" :show-border="false" :highlight="false" @change="onChange">
							<uni-grid-item v-for="(d, index) in groupList" :index="index" :key="d.id">
								<view class="grid-item-box" style="background-color: #fff;">
									<uni-icons custom-prefix="iconfont" color="#05C697" :type="d.icontype" :size="d.iconsize"></uni-icons>
									<text class="text">{{ d.name }}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>

		<view class="juan-item">
			<view grid-item-box v-for="(d, index) in 2" :index="index" :key="d.id"><image class="cimg" :src="Img"></image></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			Img: require('@/static/avatar.png'),
			current: 0,
			swiperDotIndex: 0,
			autoplay: true,
			interval: 2500,
			duration: 800,
			info: [
				{
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg'
				},
				{
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg'
				},
				{
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg'
				}
			],
			dotsStyles: {
				backgroundColor: 'rgba(255, 255, 255,0.3)',
				border: '1px rgba(255, 255, 255,0.3) solid',
				color: '#fff',
				selectedBackgroundColor: 'rgba(255, 255, 255,0.9)',
				selectedBorder: '1px rgba(255, 255, 255,0.9) solid'
			},
			dotsStyles2: {
				backgroundColor: 'rgba(193, 167, 102,0.3)',
				border: '1px rgba(193, 167, 102,0.3) solid',
				color: '#fff',
				selectedBackgroundColor: 'rgba(193, 167, 102,0.9)',
				selectedBorder: '1px rgba(193, 167, 102,0.9) solid'
			},
			group: [1, 2],
			groupList: [
				{
					name: '上新精选1',
					icontype: 'icon-shouxinxiangqing-caozuorizhi',
					iconsize: 23,
					id: 0
				},
				{
					name: '小米众筹',
					icontype: 'icon-liwu',
					iconsize: 30,
					id: 1
				},
				{
					name: '有品会员',
					icontype: 'icon-up-arrow',
					iconsize: 22,
					id: 2
				},
				{
					name: '有品秒杀',
					icontype: 'icon-fangzi01-copy',
					iconsize: 24,
					id: 3
				},
				{
					name: '小米自营',
					icontype: 'icon-shouxinxiangqing-caozuorizhi',
					iconsize: 23,
					id: 4
				},
				{
					name: '智能家电',
					icontype: 'icon-liwu',
					iconsize: 30,
					id: 5
				},
				{
					name: '手机',
					icontype: 'icon-up-arrow',
					iconsize: 22,
					id: 6
				},
				{
					name: '分类',
					icontype: 'icon-fangzi01-copy',
					iconsize: 24,
					id: 7
				},
				{
					name: '小米家电',
					icontype: 'icon-fangzi01-copy',
					iconsize: 24,
					id: 8
				},
				{
					name: '米家智能',
					icontype: 'icon-fangzi01-copy',
					iconsize: 24,
					id: 9
				}
			],
			current2: 0,
			swiperDotIndex2: 0
		};
	},
	methods: {
		clickItem(e) {
			console.log(e);
			this.swiperDotIndex = e;
		},
		change(e) {
			this.current = e.detail.current;
		},
		change2(e) {
			console.log(e);
			this.current2 = e.detail.current;
		},
		clickBanner(d) {
			console.log(d);
			uni.showToast({
				title: '到详情',
				icon: 'none',
				duration: 2000
			});
		},
		onChange(e) {
			console.log(e);
			uni.showToast({
				title: e.detail.index + '',
				icon: 'none',
				duration: 2000
			});
		}
	}
};
</script>

<style lang="scss">
.s-recommend {
	.uni-swiper-dot-box {
		border-radius: 14rpx;
		height: 300rpx;
	}
	.uni-group__content {
		padding: 0 !important;
	}
	.grid-item-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 15px 0;
		box-sizing: border-box;
		height: 100%;
		justify-content: space-around;
		.uni-icons {
			height: 60rpx;
			line-height: 60rpx;
		}
		.text {
			font-size: 24rpx;
			margin-top: 16rpx;
		}
	}
	.menu-swiper {
		height: 340rpx;
	}
	.juan-item {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		.cimg {
			width: 364rpx;
			height: 280rpx;
			border-radius: 14rpx;
		}
		// uni-image{
		// 	width: 364rpx;
		// 	height: 280rpx;
		// 	border-radius: 14rpx;
		// }
	}
}
</style>
